<%--
  Created by IntelliJ IDEA.
  User: Li Chuanwei
  Date: 2023-07-15
  Time: 19:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
    <style>
        .layui-table-cell {
            text-align: center;
            height: auto !important;
            white-space: normal;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form class="layui-form layui-row layui-col-space16" style="margin-bottom: 10px">
            <div class="layui-inline">
                <label class="layui-form-label">管理员编号</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input type="text" name="adminId" placeholder="请输入管理员编号(精确查找)" class="layui-input" lay-verify="number">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input type="text" name="name" placeholder="请输入姓名" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input type="text" name="phone" placeholder="请输入电话" class="layui-input" lay-verify="number">
                </div>
            </div>
            <div class="layui-inline">
                <button id="search" class="layui-btn layui-btn-normal layui-row-xs" lay-submit lay-filter="search">查找
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-row-xs">清空</button>
            </div>
        </form>
        <table class="layui-hide" id="adminTableld" lay-filter="adminTableld"></table>

        <%-- 用户图片列--%>
        <script type="text/html" id="adminPic">
            <img src="${IMG_SERVER}/admin/{{d.avatar}}" onclick="showBigImage(this)" style="width: 80% ; height: 100%"
                 class="adminPic">
        </script>

        <%--自定义状态开关按钮--%>
        <script type="text/html" id="accStateSwitch">
            <input type="checkbox" name="status" value="{{= d.state }}" title="已启用|已停用" lay-skin="switch"
                   lay-filter="demo-templet-status" {{# if (d.state== 1) { }}
                   checked
                   {{# } }}>
        </script>
        <script type="text/html" id="adminTableldBar">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="view">查看</a>
            <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="update">修改</a>
        </script>
    </div>
</div>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        form.render();

        table.render({
            elem: '#adminTableld',
            request: {
                pageName: 'pageNum', // 页码的参数名称，默认：page
                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
            },
            url: '${pageContext.request.contextPath}/manager/admin/list',//查询管理员信息
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox"},
                {title: '序号', type: "numbers", align: "center"},
                {field: 'id',  title: '编号', sort: true,hide:true},
                {field: 'nickname',  title: '昵称', sort: true},
                {field: 'avatar',  title: '头像',templet: "#adminPic"},
                {field: 'account',  title: '账号'},
                {field: 'phone', title: '电话'},
                {field: 'email',  title: '电子邮箱'},
                {field: 'state',  title: '账号状态',templet: "#accStateSwitch"},
                {title:'操作',  toolbar: '#adminTableldBar'}
            ]],
            limits: [8, 15, 20, 25, 50, 100],
            limit: 8,
            page: true,
            loading: true,
            skin: 'skin',
        });

        /**
         * 条件搜索表格数据重载
         */
        form.on('submit(search)', function (data) {
            //执行重载
            table.reload('adminTableld', {
                page: {
                    curr: 1 //重新从第 2 页开始
                }
                , where: {
                    id:data.field.adminId,
                    nickname:data.field.name,
                    phone:data.field.phone
                }
            }, 'data');
            return false;
        });

        /**
         * 自定义验证规则
         */
        form.verify({
            number: function(value){
                if(value && isNaN(value)) return '只能填写数字';
            }
        });
    });
</script>
</body>
</html>
